Vue.component('my-header',{
    data:function () {
        return{
            user:localStorage.user?JSON.parse(localStorage.user):null
        }
    },
    methods:{
        handleSelect(key,keyPath){
            if (key==1){
                location.href="/";
            }
        },
        logout(){
            if (confirm("您确认退出登录吗?")){
                axios.get("/v1/users/logout").then(function (response) {
                    if (response.data.code==1){
                        localStorage.clear();
                        location.href="/login.html";
                    }
                })
            }
        },
        reg(){
            location.href="reg.html"
        },
        login(){
            location.href="login.html"
        }
    },
    template:`
         <el-header>
        <el-row>
          <!-- 2.1.1右头输入框 -->
          <el-col :span="16">
            <div class="search" style="width: 400px;
                  border: 2px solid gainsboro;
                  background-color: #161823;
                  border-radius: 100px;
                  padding: 2px;
                  overflow: hidden;
                  float: right;">
              <input style="background-color: #161823;
                        color: #e8e8e9;
                        border: none;
                        outline: none;
                        font-size: 1rem;
                        padding-left: 15px;
                        width: 73%;
                        border-bottom-left-radius: 100px;
                        border-top-left-radius: 100px;"
                     type="text" placeholder="请输入您感兴趣的内容">
              <button><i class="">搜索</i></button>
            </div>
          </el-col>
          <!-- 2.1.2右头菜单栏 -->
          <el-col :span="8">
            <div class="nav">
              <ul style="display: flex;
                    float: right;
                    align-items: center;">
                <li><a href="Javascript:;">充抖币</a></li>
                <li><a href="Javascript:;">客户端</a></li>
                <li><a href="Javascript:;">快捷访问</a></li>
                <li><a href="Javascript:;">通知</a></li>
                <li><a href="Javascript:;">私信</a></li>
                <li><a href="Javascript:;">投稿</a></li>
                <!--登录图标 -->
                <el-popover class="el_popover"
                            placement="top-start"
                            title="欢迎来到土土乐!"
                            width="200"
                            trigger="hover">
                  <!--设置初始显示的内容-->
                  <div slot="reference">
                    <i style="font-size: 30px;position: relative;top: 20px" class="el-icon-user"></i>
                  </div>
                  <!--设置弹出的内容-->
                  <el-button type="info" @click="reg()">注册</el-button>
                  <el-button type="warning" @click="login()">登录</el-button>
                </el-popover>
<!--                <el-popover-->
<!--                            placement="top-start"-->
<!--                            title="欢迎来到烘焙坊!"-->
<!--                            width="200"-->
<!--                            trigger="hover">-->
<!--                  &lt;!&ndash;设置初始显示的内容&ndash;&gt;-->
<!--                  <div slot="reference">-->
<!--                    <i style="font-size: 30px;position: relative;top: 20px" class="el-icon-user"></i>-->
<!--                  </div>-->
<!--                  &lt;!&ndash;设置弹出的内容&ndash;&gt;-->
<!--                  <div style="text-align: center">-->
<!--                    <el-avatar :src="user.imgUrl"></el-avatar><br>-->
<!--                    <a href="/personal.html">个人中心</a>-->
<!--                    <a href="javascript:void(0)" @click="logout()">退出登录</a>-->
<!--                  </div>-->
<!--                </el-popover>-->
<!--                &lt;!&ndash;登录图标结束&ndash;&gt;-->
              </ul>
            </div>
          </el-col>
        </el-row>
      </el-header>
    `
})